<template>
  <el-container>
    <el-header>
      <headers :activeIndex="activeIndex"></headers>
    </el-header>
    <el-main>
      <el-row>
        <el-col :offset="2" :span="20" style="margin-top:1rem;">
          <el-radio-group v-model="status" size="mini">
            <el-radio-button label="0">未付款</el-radio-button>
            <el-radio-button label="1">已付款</el-radio-button>
            <el-radio-button label="2">已发货</el-radio-button>
            <el-radio-button label="3">已确认</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :offset="2" :span="20" style="margin-top:1rem;">
          <el-table :data="orders" style="width: 100%" :span-method="objectSpanMethod">
            <el-table-column prop="id" label="订单号" width="180">
            </el-table-column>
            <el-table-column prop="commodityId" label="商品id" width="180">
            </el-table-column>
            <el-table-column prop="commodityName" label="商品名" width="300">
            </el-table-column>
            <el-table-column label="收货人信息" width="400">
              <template slot-scope="scope">
                <el-row>
                  <el-col>
                    {{scope.row.address.name}}
                  </el-col>
                  <el-col>
                    {{scope.row.address.phone}}
                  </el-col>
                  <el-col>
                    {{scope.row.address.address}}
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column prop="logisticNumber" label="物流单号" width="200">
            </el-table-column>
            <el-table-column prop="total" label="总金额" width="100">
            </el-table-column>
            <el-table-column prop="payment" label="实际支付" width="100">
            </el-table-column>
            <el-table-column prop="orderstatus" label="状态" width="100" :formatter="formatstatus">
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" width="180">
            </el-table-column>
            <el-table-column label="付款时间" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.paymentEntiry">{{scope.row.paymentEntiry.createTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="changeStatus(scope.row)" type="text" size="small"
                  v-if="scope.row.orderstatus==1 | scope.row.orderstatus==2 ">更改状态</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="2" :span="20" style="margin-top:1rem;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
      <el-dialog title="更改订单状态" :visible.sync="dialogVisible" width="30%">
        <el-row>
          <el-col>
            <el-radio v-model="current_row.orderstatus" :label="1" border>未发货</el-radio>
            <el-radio v-model="current_row.orderstatus" :label="2" border>已发货</el-radio>
          </el-col>         
        </el-row>
        <el-row>
          <el-col style="margin-top:1rem;">
            <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入订单号"
            v-model="current_row.logisticNumber">
          </el-input>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dosubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  import headers from '@/components/headers.vue'
  import axios from 'axios'
  export default {
    data: function () {
      return {
        activeIndex: '1',
        orders: [],
        status: 1, //订单状态进行筛选

        page: 1,
        limit: 10,
        total: 0,

        dialogVisible: false,
        current_row: {}
      }
    },
    components: {
      headers
    },
    methods: {
      formatstatus(row, cpl, val) {
        if (val == 0) {
          return "未付款"
        } else if (val == 1) {
          return "已付款"
        } else if (val == 2) {
          return "已发货"
        } else if (val == 3) {
          return "完成"
        }

      },
      objectSpanMethod({
        row,
        columnIndex
      }) {
        let identification = row.identification
        let orderLength = row.orderLength
        if (columnIndex === 0 | columnIndex === 3 | columnIndex === 4 | columnIndex === 5 | columnIndex === 6 |
          columnIndex === 7 | columnIndex === 8 | columnIndex === 9 | columnIndex === 10) {
          if (identification == true) {
            return {
              rowspan: orderLength,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      handleSizeChange(val) {
        this.limit = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getData()
      },
      changeStatus(row) {
        this.current_row = row
        this.dialogVisible = true
        console.log(row)
      },
      dosubmit(){
        let obj={
          id:this.current_row.id,
          status:this.current_row.orderstatus,
          logisticNumber:this.current_row.logisticNumber
        }
        axios.put(this.$store.state.base_url+"/order/admin",obj).then(res=>{
          if(res.data.code=="SUCCESS"){
            this.dialogVisible = false
            this.$message({
              message: '订单状态更新成功',
              type: 'success'
            });
          }else{
            this.$message.error(res.data.message)
          }
          this.getData()
        })
      },
      getData() {
        axios.get(this.$store.state.base_url + '/order/admin?page=' + this.page + "&limit=" + this.limit + "&status=" +
          this.status).then(data => {
          let origin_orders = data.data.data.data
          let new_orders = []
          for (const iterator of origin_orders) {
            let identification = true
            let orderLength = iterator.orderToCommodities.length
            for (const item of iterator.orderToCommodities) {
              let obj = {}
              obj.identification = identification
              obj.orderLength = orderLength
              obj.address = iterator.address
              obj.id = iterator.id
              obj.total = iterator.total
              obj.orderstatus = iterator.status
              obj.payment = iterator.payment
              obj.paymentEntiry = iterator.paymentEntity
              obj.logisticNumber = iterator.logisticNumber
              obj.createTime = iterator.createTime
              obj.commodityNum = item.commodityNum
              obj.commodityName = item.commodity.commodityName
              obj.commodityId = item.commodity.id
              obj.pic = item.commodity.listPic
              obj.price = item.commodity.price
              new_orders.push(obj)
              identification = false
            }

          }
          this.orders = new_orders
          this.page = data.data.data.page.page
          this.limit = data.data.data.page.limit
          this.total = data.data.data.page.total
          console.log(origin_orders, new_orders)
          console.log(data.data.data.page)

        })
      }

    },
    created() {
      this.getData()
    },
    watch: {
      "status": function () {
        this.getData()
      }
    }
  }
</script>


<style scoped>

</style>